<html>
<head>
    <title>arc drawing</title>
    <script type="text/javascript" src="../jooscript.js"></script><script type="text/javascript" src="../fxcanvas.js"></script><!--[if IE]><script type="text/javascript" src="../flash_backend.js"></script><![endif]--><comment><script type="text/javascript" src="../canvas_backend.js"></script></comment>
    <script type="text/javascript">
        function rand (min, max)
        {
          var randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
          return randomNum;
        }

        function load() {
            canvas = document.getElementById("cv");
            ctx = canvas.getContext("2d");

            ctx.lineWidth = "1";
            ctx.strokeStyle = "rgb(0, 0, 0)";

            var sweep = 0,
                clockwise = true;

            function drawCircles(){
                ctx.clearRect(0,0,canvas.width, canvas.height)
                ctx.save();
                ctx.translate(300, 300)
                for(var i = 0; i < 100; i++) {
                  ctx.beginPath();
                  ctx.strokeStyle = "rgb("+ rand(2, 255) +", "+ rand(2, 255) +", "+ rand(2, 255) +")";
                  var e = sweep*(Math.PI/180)
                  ctx.arc(0, 0, i*2, 0, e, clockwise);
                  ctx.stroke();
                }
                ctx.restore();
                if(sweep == 360) {
                    clockwise = !clockwise   
                    sweep = 10
                } else
                    sweep += 10
            }
            canvas.oncanvasframe = drawCircles
        }
    </script>
    <style>
        body {
            margin:50px;
            text-align:center;
        }

        canvas {
            border:1px solid #444;
        }
    </style>
</head>
<body onload="load();">
    <canvas id="cv" width="600" height="600"></canvas>
</body>
</html>
